<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>忘忧网后台</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="../Xadmin/css/xadmin.css">
    <link rel="stylesheet" href="../Xadmin/css/login.css">
    <link rel="stylesheet" href="../Xadmin/css/font.css">
    <script src="../layui/layui.js" charset="utf-8"></script>
    <script src="../JS/BaseJS.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!--头部搜索栏 -->
<div style="margin-left: 10rem;margin-top: 1rem;margin-bottom: 0.5rem">
    id:
    <div class="layui-inline">
        <input class="layui-input" id="id" autocomplete="off"/>
    </div>
    音乐名:
    <div class="layui-inline">
        <input class="layui-input" id="UName" autocomplete="off"/>
    </div>
    <button class="layui-btn" data-type="reload" onclick="search()">搜索</button>
</div>
<!--表格 -->
<table class="layui-hide" id="MusicTab" lay-filter="UserTab"></table>
<!--头部工具栏 -->
<script type="text/html" id="UserToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="Chose">选择</button>
    </div>
</script>
</body>
<script src="../layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('upload',function (){//导入上传组件
        console.log("上传组件导入成功!")
    })
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.jquery
        var upload = layui.upload
        table.render({//动态加载表格
            elem: "#MusicTab" //绑定表格
            , url: BaseUrl+"Singer/SingerList"//请求地址
            , toolbar: '#UserToolbar'//头部工具栏
            , headers: {}//请求头 token写在这里
            , where: {
                SName: "",
                id: -1
            } //查询条件
            , defaultToolbar: ['filter', 'exports', 'print', {
                title: "提示"
            }]
            , title: "用户列表"//表名称
            , cols: [[
                {
                    type: 'radio', fixed: 'left'
                } //单选
                , {field: "id", title: "编号", width: 80, fixed: "left", sort: true} //field:后端传入字段名，title:字段别名，width:宽度
                , {field: "SName", title: "音乐名", width: 80, fixed: "left", sort: true} //field:后端传入字段名，title:字段别名，width:宽度
                , {field: "SInfo", title: "音乐", width: 322, fixed: "left", sort: true} //field:后端传入字段名，title:字段别名，width:宽度
                , {field: "SImg", title: "音乐图片", width:140, fixed: "left", sort: true,templet: '#StatusTql'}
            ]]
            , page: true//开启分页
        });
        table.on('toolbar(UserTab)', function (obj) {
            var selectCol = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'Chose'://添加用户
                    localStorage.setItem("Sid1",selectCol.data[0].id)//将信息储存到localstorage
                    window.location.href="AddMusic.html"
                    break;
            }
        })//头部工具栏
    })

    function search() {//头部搜索按钮
        var table = layui.table;
        table.reload('UserTab', {
            url: BaseUrl+"Singer/Singer"
            , request: {//往后端传入的参数的参数名称
                pageName: 'page',
                limitName: 'limit'
            }
            , where: {
                SName: $("#UName").val(),
                id: $("#id").val()
            }
            , page: {
                curr: 1//当前页码
            }
        })
    }
</script>
<script type="text/html" id="StatusTql">  <!--状态模板 -->
<span><img src="{{d.SImg}}"></span>
</script>
</html>